<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高精度IP地址查询|IP地址查询|IP定位</title>
    <base href="../">
    <meta name="keywords" content="高精度IP定位,IP地址查询,高德地图展示IP位置,IP精准定位" />
    <meta name="description" content="高精度IP定位,IP地址查询,高德地图展示IP位置,IP精准定位" />
    <script src="//lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//lib.baomitu.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/ip.css" rel="stylesheet" />
	<script src="./js/baidutongji.js"></script>
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar">
                    </span>
                    <span class="icon-bar">
                    </span>
                    <span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" id="logo" title="主页" href="#home">
                    二毛的在线工具
                </a>
            </div>
            <!-- end .navbar-header -->
            <div class="navbar-collapse collapse">
                <ul id="menu-primary" class="nav navbar-nav navbar-right">
                    <li>
                        <a href="./v/dy.html" class="dropdown-toggle">
                            抖音作品解析
                        </a>
                    </li>
                    <li>
                        <a href="./v/dy2.html" class="dropdown-toggle">
                            抖音用户查询
                        </a>
                    </li>
                    <li>
                        <a href="./v/ks.html" class="dropdown-toggle">
                            快手作品解析
                        </a>
                    </li>
                    <li>
                        <a href="./v/ks2.html" class="dropdown-toggle">
                            快手用户查询
                        </a>
                    </li>
                    <li>
                        <a href="./tools/ip.html" class="dropdown-toggle">
                            IP定位
                        </a>
                    </li>
                    <li>
                        <a href="./tools/walk.html" class="dropdown-toggle">
                            刷步数
                        </a>
                    </li>
                    <li>
                        <a href="./tools/pan.html" class="dropdown-toggle">
                            查网盘
                        </a>
                    </li><li>
                        <a href="https://news.erma0.cn/" class="dropdown-toggle">
                            看热搜
                        </a>
                    </li>
                </ul>
            </div>
            <!-- end .navbar-collapse -->
        </div>
        <!-- end .container -->
    </nav>
    <div id='container'></div>
    <div class="info" hidden>

        <h4 id='status'>定位中</h4>
        <hr>
        <p id='result'>

        </p>
        <hr>
        <!-- ================================= -->
        <div class="input-item">
            <div class="input-item-prepend">
                <span class="input-item-text">请输入IP</span>
            </div>
            <input id='input' type="text" value=''>

            <div class="input-item-endpend">
                <!--  -->
                <span class="input-item-text" style="width: auto;" id="locate">定位</span>
                <!-- <button type="button" class="input-item-text" onclick="locate()">定位</button> -->
            </div>
        </div>

        <!-- <p>由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p> -->

        <p><span id="input-info"></span></p>
    </div>
    <!-- 608d75903d29ad471362f8c58c550daf -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0113a13c88697dcea6a445584d535837">
    </script>
    <script type="text/javascript">
        // window.onload = function () {}
        $(document).ready(function () {
            $.ajax({ //初始化时输出自己的IP
                url: 'https://erma0.cn/api/ip',
                success: function (data) {
                    $('#input').val(data.ip)
                }
            })
        })
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: false, //是否使用高精度定位，默认:true【不用高精度，直接IP定位】
                timeout: 100, //超过10秒后停止定位，默认：5s【高精度为true时有效】
                buttonPosition: 'RB', //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                $('.info').show()
                if (status == 'complete') {
                    onComplete(result)
                } else {
                    onError(result)
                }

            });
        });
        //解析定位结果
        function onComplete(data) {
            $('#status').html('定位成功')
            var str = [];
            str.push('定位结果：' + data.position.lng + ',' + data.position.lat, );
            console.log(data.position)
            str.push('定位类别：' + data.location_type);
            if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
            } //如为IP精确定位结果则没有精度信息
            if (data.confidence) {
                str.push('可信度：' + toPercent(data.confidence));
            } //可信度信息
            // str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            $('#result').html(str.join('<br>'));

            // =======================地图操作=====================================

            // map.setCenter([lng, lat]); //设置地图中心点
            // 清除现有覆盖物
            map.clearMap();
            // 构造点标记
            var marker = new AMap.Marker({
                // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [data.position.lng, data.position.lat]
            });
            // 设置鼠标划过点标记显示的文字提示
            marker.setTitle('定位点');
            // 设置label标签
            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            // marker.setLabel({
            //     direction: 'right',
            //     offset: new AMap.Pixel(5, 0), //设置文本标注偏移量
            //     content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
            // });
            // 添加覆盖物
            map.add(marker);
            // 构造矢量圆形
            var circle = new AMap.Circle({
                center: new AMap.LngLat(data.position.lng, data.position.lat), // 圆心位置
                radius: 100, //半径
                strokeColor: "#F33", //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 3, //线粗细度
                fillColor: "#ee2200", //填充颜色
                fillOpacity: 0.35 //填充透明度
            });
            map.add(circle);
            map.setFitView(); //自适应圆的视图大小
        }
        //解析定位错误信息
        function onError(data) {
            $('#status').html('定位失败')
            $('#result').html('失败原因:' + data.message);
        }

        $('#locate').click(function () {
            $('#status').html('定位中')
            locate()
        })
        // map.setCenter([lng, lat]); //设置地图中心点
        // map.setZoom(18); //设置地图层级11-18

        function locate() {
            var ip = $('#input').val(),
                url = 'https://restapi.amap.com/v4/ip?key=0113a13c88697dcea6a445584d535837&ip=' + ip
            $.ajax({
                url: url,
                success: function (data) {

                    if (data.errcode == 0) {
                        var lng = data.data.lng,
                            lat = data.data.lat,
                            confidence = data.data.confidence
                        // 成功后解析
                        onComplete({
                            // position: lng + ',' + lat,
                            position: {
                                Q: lat,
                                R: lng,
                                lng: lng,
                                lat: lat
                            },
                            location_type: 'ip',
                            isConverted: true,
                            lng: lng,
                            lat: lat,
                            confidence: confidence
                        })

                    } else {
                        onError({
                            message: data.errmsg
                        })
                    }
                    // console.log(data)

                },
                error: function (err) {
                    onError({
                        message: 'IP不在库中或key已失效！'
                    })
                }
            })
        }

        function toPercent(point) {
            if (point == 0) {
                return 0;
            }
            var str = Number(point * 100).toFixed(2);
            str += "%";
            return str;
        }
    </script>
</body>

</html>